<template>
    <v-container>
        <v-content>
            <v-layout>
                <v-flex>
                    <v-card elevation="0">
                        <v-card-title class="display-1" v-text="blogTitle"></v-card-title>
                    </v-card>
                </v-flex>
            </v-layout>
            <v-layout>
                <v-flex xs6>
                    <v-card elevation="0">
                        <v-card-text>
                            作者:
                            <v-icon>mdi-account-circle</v-icon>
                            {{blog.author}}
                        </v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs8>
                    <v-card elevation="0">
                        <v-card-text>
                            发表时间:
                            <v-icon>mdi-history</v-icon>
                            {{blog.createTime}}
                        </v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs6>
                    <v-card elevation="0">
                        <v-card-text>
                            分类:
                            <v-icon> mdi-google-chrome</v-icon>
                            <v-btn x-small color="success">
                                {{blog.blogType}}
                            </v-btn>
                        </v-card-text>
                    </v-card>
                </v-flex>
                <v-flex xs4>
                    <v-card elevation="0">
                        <v-card-text>
                            评论数量: {{commentData.length}}
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
            <v-layout column>
                <v-flex>
                    <div class="mavonEditor">
                        <mavon-editor
                                :toolbars="markdownOption"
                                :boxShadow="false"
                                :scrollStyle="true"
                                :subfield="false"
                                :navigation="false"
                                :transition="false"
                                defaultOpen="preview"
                                v-model="blogContent"></mavon-editor>
                    </div>
                </v-flex>
                <v-flex>
                    <material-card color="green darken-1">
                        <template v-slot:header>
                            <div class="px-3">
                                <div class="title font-weight-light mb-2">
                                    评论
                                </div>

                                <div class="category">
                                    欢迎灌水~
                                    <v-icon size="17">
                                        mdi-heart
                                    </v-icon>
                                </div>
                            </div>
                        </template>

                        <v-card-text>
                            <div class="text-center">
                                <h2 class="title font-weight-light mb-2">
                                    随便刷点啥
                                </h2>
                                <span class=" subheading font-weight-light grey--text">
                                    有趣的灵魂在哪里？
                                </span>
                            </div>

                            <v-container>
                                <v-sheet width="100%">
                                    <v-textarea
                                            v-model="commentValue"
                                            :auto-grow="true"
                                            :clearable="true"
                                            :counter="false"
                                            hint="多少说一个字吧"
                                            label="评论"
                                            :no-resize="true"
                                            :persistent-hint="true"
                                            placeholder="写下你的评论"
                                            :rounded="true"
                                            :row-height="15"
                                            :rows="8"
                                            :shaped="true"
                                            :solo="true"
                                            require
                                    />
                                    <v-card elevation="0" class="text-right" width="100%">
                                        <v-btn right color="green darken-1" @click="doComment" dark>提交</v-btn>
                                    </v-card>
                                </v-sheet>

                                <comment :comments="commentData"
                                         @getCommentDataByBlogId="getCommentDataByBlogId"></comment>
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="current"
                                        :page-size="pageSize"
                                        :page-sizes="[10,20,30]"
                                        layout="total, sizes ,prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                            </v-container>
                        </v-card-text>
                    </material-card>
                </v-flex>
            </v-layout>
        </v-content>

    </v-container>


</template>

<script>
    import comment from 'components@/front/blog/Comment.vue'

    export default {
        name: "blogView",
        components: {
            comment
        },
        data: () => ({
            blog: "",//博客对象
            blogTitle: "",//博客标题
            blogContent: "",//博客内容
            markdownOption: {
                bold: false, // 粗体
                italic: false, // 斜体
                header: false, // 标题
                underline: false, // 下划线
                strikethrough: false, // 中划线
                mark: false, // 标记
                superscript: false, // 上角标
                subscript: false, // 下角标
                quote: false, // 引用
                ol: false, // 有序列表
                ul: false, // 无序列表
                link: false, // 链接
                imagelink: false, // 图片链接
                code: false, // code
                table: false, // 表格
                fullscreen: false, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                htmlcode: false, // 展示html源码
                help: false, // 帮助
                /* 1.3.5 */
                undo: false, // 上一步
                redo: false, // 下一步
                trash: false, // 清空
                save: false, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: false, // 导航目录
                /* 2.1.8 */
                alignleft: false, // 左对齐
                aligncenter: false, // 居中
                alignright: false, // 右对齐
                /* 2.2.1 */
                subfield: false, // 单双栏模式
                preview: false, // 预览
            },
            //评论信息
            commentData: [],
            commentValue: "",//用户评论的内容
            current: 1,//初始时是第几页
            pageSize: 10,//一页需要展示多少条博客
            size: 0,//当前总共有多少页，根据后台回传的参数计算
            total: 0,//总数
            pages: 0//总页数
        }),
        methods: {
            /**
             * 评论下
             */
            doComment() {
                //评论内容不能为空
                if (this.commentValue === "") {
                    this.$iziToast.warning({message: "评论内容不能为空，不要写无字天书好吗，宝贝"});
                    return;
                }
                this.$axios.post("/api/comment/doComment", this.$qs.stringify({
                    blogId: this.blog.id,
                    content: this.commentValue
                })).then(res => {
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        let resultMessage = resultData.message;
                        this.commentValue = "";
                        this.getCommentDataByBlogId();
                        this.$iziToast.success({message: resultMessage});
                    }
                });
            },
            /**
             * 根据blogId获取评论信息
             */
            getCommentDataByBlogId() {
                this.$axios.post("/api/comment/getCommentByBlogId", this.$qs.stringify({
                    blogId: this.blog.id,
                    current: this.current,
                    pageSize: this.pageSize
                })).then(res => {
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        let data = resultData.data;
                        this.commentData = [];
                        this.commentData.push(...data.records);
                        this.setPaginations(data);
                    }
                });
            },
            //页面尺寸变更
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getCommentDataByBlogId();
            },
            //改变当前页
            handleCurrentChange(current) {
                this.current = current;
                this.getCommentDataByBlogId();

            },
            //设置分页属性
            setPaginations(page) {
                this.current = page.current;
                this.total = page.total;
                this.pageSize = page.size;
                this.pages = page.pages;
            },

        },
        //实例创建完成
        created() {
            this.blog = this.$route.params.blog;
            this.blogTitle = this.blog.title;
            this.blogContent = this.blog.blogContent;
            this.getCommentDataByBlogId();
        }
    }
</script>

<style scoped>

</style>